<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">

<script>
    /*
    var arrayCollection = [
        {"id": "animal", "parent": "#", "text": "Animals", "data": {"name": "Quick"}},
        {"id": "device", "parent": "#", "text": "Devices"},
        {"id": "dog", "parent": "animal", "text": "Dogs", "icon": "fa fa-file-o"},
        {"id": "lion", "parent": "animal", "text": "Lions", "icon": "fa fa-file-o"},
        {"id": "mobile", "parent": "device", "text": "Mobile Phones", "icon": "fa fa-file-o"},
        {"id": "lappy", "parent": "device", "text": "Laptops", "icon": "fa fa-file-o"},
        {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "fa fa-long-arrow-right"},
        {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "fa fa-long-arrow-right"},
        {"id": "african", "parent": "lion", "text": "African Lion", "icon": "fa fa-long-arrow-right"},
        {
            "id": "indian",
            "parent": "lion",
            "text": "Indian Lion",
            "icon": "fa fa-long-arrow-right",
            "data": {"lastName": "Silver"}
        },
        {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "fa fa-long-arrow-right"},
        {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "fa fa-long-arrow-right"},
        {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "fa fa-long-arrow-right"},
        {"id": "hp", "parent": "lappy", "text": "HP", "icon": "fa fa-long-arrow-right"}
    ];  */

</script>
<head th:include="include :: header"></head>


<body>
<div class="container" style="padding:10px 10px;">
    <h1>Demo : Jstree Example</h1>
    <div id="header"></div>
    <div class="well clearfix">
        <div class="col-md-4">
            <!--panel-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search node .." id="search">
                        <span class="input-group-btn">
					<button class="btn btn-default" type="button" id="btn-search">检索</button>
                    <button class="btn btn-default" type="button" id="btn-expand"
                            onclick="demo_open_all();">展开</button>
                    <button class="btn btn-default" type="button" id="btn-collapse"
                            onclick="demo_close_all();">关闭</button>

				  </span>
                    </div><!-- /input-group -->
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8" id="jstree_demo_div"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <!--panel-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    Edit JsTree -
                </div>
                <div class="panel-body">
                    <div class="" id="edit-node">
                        <div class="input-group">
                            <span class="input-group-btn">
					        <button class="btn btn-default " type="button" id="btn-create_parent"
                                    onclick="demo_create_parent();">创建父节点</button>
                            <button class="btn btn-default " type="button" id="btn-create_child"
                                    onclick="demo_create_child();">创建叶节点</button>
                            <button class="btn btn-default" type="button" id="btn-rename"
                                    onclick="demo_rename();">重命名</button>
                            <button class="btn btn-default" type="button" id="btn-delete"
                                    onclick="demo_delete();">删除</button>
				            </span>
                            <span class="input-group-btn">
					        <button class="btn btn-default " type="button" id="btn-copy"
                                    onclick="demo_copy();">拷贝</button>
                            <button class="btn btn-default" type="button" id="btn-cut"
                                    onclick="demo_cut();">剪切</button>
                            <button class="btn btn-default" type="button" id="btn-paste"
                                    onclick="demo_paste();">粘帖</button>
				            </span>

                        </div><!-- /input-group -->
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    Console -
                </div>
                <div class="panel-body">
                    <div class="" id="content">
                        Content
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>
<div th:include="include :: footer"></div>
</body>
</html>

<script>
    $(document).ready(function () {
        getTreeData()
    });

    function getTreeData() {
        $.ajax({
            type: "GET",
            url: "/sys/user/tree",
            success: function (tree) {
                loadTree(tree);
            }
        });
    }
</script>
